<template>
  <div class="search-page">
    <!-- 搜索栏 -->
    <van-search
      v-model="searchValue"
      placeholder="搜索商品..."
      show-action
      @search="handleSearch"
      @cancel="onCancel"
      :autofocus="true"
    >
      <template #action>
        <van-button size="small" type="text" @click="handleSearch">搜索</van-button>
      </template>
    </van-search>

    <!-- 搜索历史记录区域 -->
    <div class="history-container" v-show="historyList.length > 0">
      <div class="history-header">
        <span>搜索历史</span>
        <van-button
          size="small"
          type="text"
          @click="clearAllHistory"
          class="clear-btn"
        >
          清空
        </van-button>
      </div>

      <!-- 历史记录标签 -->
      <div class="history-tags">
        <van-tag
          v-for="(item, index) in historyList"
          :key="index"
          closable
          @click="handleHistoryClick(item)"
          @close="deleteHistory(index)"
          class="history-tag"
        >
          {{ item }}
        </van-tag>
      </div>
    </div>

    <!-- 无历史记录提示 -->
    <div class="no-history"  v-if="hotSearchList.length < 0">
      <van-empty description="暂无搜索历史" />
    </div>

    <!-- 热门搜索推荐 -->
    <div class="hot-search">
      <div class="hot-header">热门搜索</div>
      <div class="hot-tags">
        <van-tag
          v-for="(item, index) in hotSearchList"
          :key="index"
          @click="handleHotClick(item)"
          class="hot-tag"
        >
          {{ item }}
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '', // 搜索框内容
      historyList: [], // 搜索历史记录数组
      // 热门搜索推荐（实际项目可从接口获取）
      hotSearchList: ['手机', '笔记本电脑', '夏季连衣裙', '运动鞋', '防晒霜', '蓝牙耳机']
    };
  },

  mounted() {
    // 页面加载时从本地存储读取历史记录
    this.loadHistory();
  },

  methods: {
    // 从本地存储加载历史记录
    loadHistory() {
      const history = localStorage.getItem('searchHistory');
      if (history) {
        this.historyList = JSON.parse(history);
      }
    },

    // 保存历史记录到本地存储
    saveHistory(keyword) {
      // 去重：如果记录已存在，先删除再添加（保证最新记录在前面）
      this.historyList = this.historyList.filter(item => item !== keyword);
      // 添加到数组开头
      this.historyList.unshift(keyword);
      // 限制最多保存10条记录
      if (this.historyList.length > 10) {
        this.historyList.pop(); // 超过10条则删除最后一条
      }
      // 保存到本地存储
      localStorage.setItem('searchHistory', JSON.stringify(this.historyList));
    },

    // 处理搜索操作
    handleSearch() {
      const keyword = this.searchValue.trim();
      if (!keyword) {
        return // 空值不处理
      }

      // 保存搜索记录
      this.saveHistory(keyword);

      // 执行搜索逻辑（跳转到结果页或更新列表）
      this.$emit('search', keyword)
      this.searchValue = ''
    },

    // 点击历史记录进行搜索
    handleHistoryClick(keyword) {
      this.searchValue = keyword;
      this.handleSearch();
    },

    // 点击热门搜索进行搜索
    handleHotClick(keyword) {
      this.searchValue = keyword;
      this.handleSearch();
    },

    // 删除单条历史记录
    deleteHistory(index) {
      this.historyList.splice(index, 1);
      localStorage.setItem('searchHistory', JSON.stringify(this.historyList))
    },

    // 清空所有历史记录
    clearAllHistory() {
      this.historyList = [];
    //  localStorage.removeItem('searchHistory');
    },

    // 取消搜索
    onCancel() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped>
.search-page {
  padding-bottom: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.history-container, .hot-search {
  padding: 15px;
  background-color: #fff;
  margin-top: 10px;
}

.history-header, .hot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.clear-btn {
  color: #999 !important;
  font-size: 13px !important;
}

.history-tags, .hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-tag {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border: none !important;
}

.hot-tag {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid #eee !important;
}

.no-history {
  padding: 30px 0;
  background-color: #fff;
  margin-top: 10px;
}
</style>
